<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{counter}}</p>
    <!--绑定自定义组件-->
    <button-data class="btn" id="a" v-on:autostart="increament"></button-data>
    <button-data class="btn" id="b" v-on:autostart="increament"></button-data>

</div>

<script>
    let total =0;
    //自定义组件
    Vue.component('button-data',{
        template:'<button v-on:click="increatNum">{{num}}</button>',
        data:function(){
           return {
               num:total
           }
        },
        methods:{
            increatNum:function () {

                this.num+=1;
                let a = document.getElementById('a').innerText;
                let b = document.getElementById('b').innerText;

                total = a*b;
                // this.counter+=1

                 this.$emit('autostart');

            }
        },
   })

    // 声明vue
    let vm = new Vue({
        el:'#app',
        data:{
           counter:0
       },
        methods:{
            increament:function(index){
                // let nums = [];
                //
                // var btns = document.getElementsByTagName("button");
                // for(let i=0;i<btns.length;i++){
                //     // if(i==0) continue;
                //     if(btns[i].innerText==0) continue;
                //     nums.push(btns[i].innerText);
                //     alert(nums);
                // }

                // total = this.num * 2;



                this.counter = total;
            }
        }

    })
</script>
</body>
</html>